import React from 'react';
import styles from './index.module.less';

interface RangeProps {
    min: number;
    max: number;
    value: number;
    onChange: (value: number) => void;
    unit?: string;
    formatter?: (value: number) => string;
}

const Range: React.FC<RangeProps> = ({
    min,
    max,
    value,
    onChange,
    unit = '',
    formatter,
}) => {
    const displayValue = formatter ? formatter(value) : `${value}${unit}`;

    return (
        <div className={styles.slider_group}>
            <input
                type="range"
                min={min}
                max={max}
                value={value}
                onChange={(e) => onChange(Number(e.target.value))}
                className={styles.slider}
            />
            <span className={styles.slider_value}>{displayValue}</span>
        </div>
    );
};

export default Range;

